<template>
	<view class="contain">
		<Header></Header>
		<view class="news">
			<view class="new1 new_item" @click="toartic('推文1进入')">
				<view class="artic">
					<view class="title">
						<text class="text_title">{{artic1.title}}</text>
					</view>
					<view class="other">
						<text>{{artic1.author+" "+artic1.time}}</text>
						<text> {{artic1.get+" 收藏量"}}</text>
					</view>
				</view>
				<view class="img">
					<image :src="artic1.img_url" mode=""></image>
				</view>
			</view>
			
			<view class="new2  new_item" @click="toartic('推文2进入')">
				<view class="artic">
					<view class="title">
						<text class="text_title">{{artic2.title}}</text>
					</view>
					<view class="other">
						<text>{{artic2.author+" "+artic2.time}}</text>
						<text> {{artic2.get+" 收藏量"}}</text>
					</view>
				</view>
				<view class="img">
					<image :src="artic2.img_url" mode=""></image>
				</view>
			</view>
			<view class="new3  new_item" @click="toartic('推文3进入')">
				<view class="artic">
					<view class="title">
						<text class="text_title">{{artic3.title}}</text>
					</view>
					<view class="other">
						<text>{{artic3.author+" "+artic3.time}}</text>
						<text> {{artic3.get+" 收藏量"}}</text>
					</view>
				</view>
				<view class="img">
					<image :src="artic3.img_url" mode=""></image>
				</view>
			</view>
		</view>
		<view class="charts-box" @click="todeal">
			<title class="charts-title">{{chart_title}}</title>
			<view class="charts-contain">
				<qiun-data-charts type="column" :chartData="chartData" />
			</view>
		</view>
	</view>
</template>
<script>
	import axios from "axios"
	export default {
		data(){
			return{
				touchNum: 0,
				chart_title: "各月订单数据可视化",
				chartData:	{
		    		categories:['6月','7月','8月','9月','10月','11月'],
		    		series:[
						{
		        			name:'省内订单数',
		        			data:[35, 36, 31, 33, 13, 34]
		      			},
						{
		        			name:'省外订单数',
		       				data:[18, 27, 21, 24, 6, 28]
		      			}]
					},
				artic1:{
					title:"30万亩！央企“种地”！",
					author:"王璟 非常农机",
					get:151,
					time:"2024-12-11",
					img_url:"https://t8.baidu.com/it/u=2281036363,1606059882&fm=3035&app=3035&size=f242,162&n=0&g=0n&f=JPEG?s=B0193A764551506708E3876C0300F07B&sec=1734161016&t=ced82431b13e9fc5287a6acd90288fdd"
				},
				artic2:{
					title:"勾芡的“芡”是什么？了解价廉物美的“水中人参”",
					author:"光明网",
					get:291,
					time:"2024-11-21",
					img_url:"https://img2.baidu.com/it/u=2660109569,752045028&fm=253&fmt=auto&app=120&f=JPEG?w=796&h=500"
				},
				artic3:{
					title:"国家粮油信息中心：玉米原料需求形势良好，加工出口形势较为乐观",
					author:"光明网",
					get:231,
					time:"2024-12-06",
					img_url:"https://img0.baidu.com/it/u=192606279,2468481279&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
				}
			}
		},
		methods:{
			getServerData(){
				uni.request({
					//发动请求从数据库获取数据
					url: "http://127.0.0.1:5000/api/msg",
					method:"POST",
					timeout:3000,
					header:{},
					data:"你好！",
					success: (res)=> {
						console.log(res.data)
					},
					fail: (res)=> {
						console.log("false!")
					}
				})
				/*console.log(this.dataFromServer)*/
			},
			updata(){
				uni.request({
					url: "",
					method:"POST",
					timeout:3000,
					data:{
						time:"2024-12-11",
					},
					success: (res)=> {
						this.chartData =  res.data.chartData
						this.chart_title = res.data.chart_title
						this.artic1 = res.data.artic1
						this.artic2 = res.data.artic2
						this.artic3 = res.data.artic3
					},
					fail: (res)=> {
						console.log("false!")
					}
				})
			},
			toartic(datas){
				//跳转至指定的文章页面并传递相应的数据参与页面渲染
				uni.navigateTo({
					url:"/pages/artic/artic?data="+datas,
					events:{
						acceptDataFromOpenedPage: function(data) {
						      console.log(data)
						    }
					},
					success: function(res) {
						res.eventChannel.emit('acceptDataFromOpenerPage', { data: datas})
					},
					fail: function() {
						console.log("文章页面数据传输失败！")
					}
				})
			},
			todeal(e){
				this.touchNum ++
				setTimeout(()=>{
					if(this.touchNum>=2){
						uni.navigateTo({
							url:"/pages/data_deal/data_deal?data="+"进入数据分析页面"
						})
					}
					this.touchNum = 0
				},250)
			}
		},
		onReady() {
			this.getServerData()
		}
	}
</script>



<style lang="scss">
	.qiun-data-charts {
		width: 100%;
		height: 100%;
		display: block;
	}
	.contain{
		position: fixed;
		height: 100%;
		width: 100%;
		background-color: #D4E4DC;
		display: flex;
		flex-direction: column;
	}
	.news{
		width: 100%;
		background-color: antiquewhite;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		position: 5px;
		border-bottom-left-radius: 20px; 
		border-bottom-right-radius: 20px; 
	}

	.new1{
		width: 100%;
		display: flex;
		justify-content: space-around;
	}
	.new2{
		width: 100%;
		display: flex;
		justify-content: space-around;
	}
	.new3{
		width: 100%;
		display: flex;
		justify-content: space-around;
	}
	.new_item{
		width: 100%;
		height: 90px;
		border-bottom: #D4E4DC 2px solid;
	}
	.new_item .title{
		margin-top: 10px;
		margin-left: 5px;
	}
	.new_item .other{
		margin-left: 5px;
	}
	.news image{
		width: 80px;
		height: 80px;
		margin: 5px;
		border-radius:10%;
	}
	.artic{
		width: 100%;
		background-color: #dfdece;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		margin-right: auto;
	}
	.other{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-bottom: 10px;
	}
	.text_title{
		font-weight: bold;
	}
	.charts-box{
		display: flex;
		height: 100%;
		width: 100%;
		flex-direction: column;
	}
	.charts-title{
		margin-top: 10px;
		width: 100%;
		text-align: center;
	}
	.charts-contain{
		width: 100%;
		height: 100%;

	}
	
</style>
